<template>
    <view>
        <view class="rounded-t-[64rpx]  relative" style="overflow: hidden;">
            <map class="w-[750rpx] h-[100vh]" 
                :latitude="latitude" 
                :longitude="longitude"
                :markers="markers"
                :circles="circles"
                :show-location="true">
            </map>
            <view style="position: absolute ; top: 50rpx; left: 56rpx;"
                class="w-[636rpx] h-[80rpx] rounded-[260rpx] bg-[#FFFFFF] flex  items-center justify-center">
                <up-search v-model="value_1" bgColor="rgba(255, 255, 255, 0)" :showAction="false" placeholder="请搜索地址"  @change="change" prefixIcon="search"
                prefixIconStyle="font-size: 22px;color: #909399" disabled shape="circle" border="none" @click="toMap"></up-search>
                <!-- <view class="u-demo-block__content ml-[-230rpx]"> -->
                   
                    <!-- <up-input v-model="value" placeholder="请搜索地址"  @change="change" prefixIcon="search"
                        prefixIconStyle="font-size: 22px;color: #909399" shape="circle" border="none"></up-input> -->
                <!-- </view> -->
            </view>
            <view style="position: absolute ; bottom: 100rpx; left: 56rpx;"
                class="w-[636rpx] h-[116rpx] rounded-[24rpx]  qwsx flex items-center justify-between ">
                <view class="ml-[36rpx]">围栏半径：</view>
                <view class="w-[240rpx] h-[88rpx] bg-[#ffffff] rounded-[20rpx] mr-[12rpx] flex items-center justify-between pr-[20rpx] pl-[56rpx]">
                    <up-input class="mt-[56rpx]" placeholder="请输入" border="none"  v-model="km" @change="updateCircles"></up-input>
                    <view class="ml-[8rpx]">km</view>
                </view>
            </view>
            
            <!-- 添加提交按钮 -->
            <view style="position: absolute; bottom: 20rpx; right: 56rpx;"
                class="w-[200rpx] h-[80rpx] bg-[#4CAF50] rounded-[40rpx] flex items-center justify-center"
                @click="submitFenceData">
                <text class="text-white font-bold">提交围栏</text>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, watch } from 'vue';
import { getPetListByLocation } from '@/api/pet';
// 响应式数据  
const value_1 = ref(''); 
const km = ref('');
const name = ref(null);
const address = ref(null);
const latitude = ref(39.909); // 默认纬度
const longitude = ref(116.39742); // 默认经度
const markers = ref([]);
const circles = ref([]);

// 更新地图标记点
const updateMarkers = () => {
    if (latitude.value && longitude.value) {
        markers.value = [{
            id: 1,
            iconPath: 'https://falvren.oss-cn-beijing.aliyuncs.com/20250606153630cbb33.png',
            latitude: latitude.value,
            longitude: longitude.value,
            width: 32,
            height: 32,
            callout: {
                content: name.value || '选择的位置',
                color: '#000000',
                fontSize: 14,
                borderRadius: 4,
                bgColor: '#ffffff',
                padding: 8,
                display: 'ALWAYS'
            }
        }];
        // 更新圆形区域
        updateCircles();
    }
};

// 更新圆形区域
const updateCircles = () => {
    if (latitude.value && longitude.value && km.value) {
        // 将千米转换为米
        const radiusInMeters = Number(km.value) * 1000;
        circles.value = [{
            latitude: latitude.value,
            longitude: longitude.value,
            color: '#0000AA33', // 蓝色半透明
            fillColor: '#0000AA11', // 填充色更透明
            radius: radiusInMeters,
            strokeWidth: 2
        }];
    } else {
        circles.value = [];
    }
};

// 监听位置变化，更新标记点
watch([latitude, longitude, name], () => {
    updateMarkers();
});

// 监听半径变化，更新圆形区域
watch(km, () => {
    updateCircles();
});

const toMap = () => {
    wx.chooseLocation({
        success: function (res) {
            console.log('选择的地址信息是', res);
            name.value = res.name;
            address.value = res.address;
            latitude.value = res.latitude;
            longitude.value = res.longitude;
            value_1.value = res.name;
            // 更新地图标记点
            updateMarkers();
        },
    })
}

const change = async (e) => {
    // const res = await searchMap({
    //     keyword: e,
    //     boundary:`region(北京市)`,
    //     get_subpois:1,
    //     page_size:20
    // })
}

// 提交围栏数据到后端
const submitFenceData = async () => {
    if (!name.value || !latitude.value || !longitude.value || !km.value) {
        uni.showToast({
            title: '请选择位置并输入围栏半径',
            icon: 'none'
        });
        return;
    }
    
    try {
        const fenceData = {
            name: name.value,
            address: address.value,
            latitude: latitude.value,
            longitude: longitude.value,
            radius: Number(km.value) // 确保半径是数字类型
        };
        
        console.log('提交的围栏数据:', fenceData);
        
        const res = await getPetListByLocation(fenceData);
        console.log('提交围栏数据成功:', res);
        if (res.code == 200) {
            uni.showToast({
            title: '围栏设置成功',
            icon: 'success'
        });
        
         uni.navigateBack({
            delta: 2
        });
        }else{
            uni.showToast({
            title: res.msg,
            icon:'none'
            })
        }
       
        
       
    } catch (error) {
        console.error('提交围栏数据失败:', error);
        uni.showToast({
            title: '围栏设置失败，请重试',
            icon: 'none'
        });
    }
};
</script>
<style scoped lang="scss">
.qwsx {
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    border: 2rpx solid #FFFFFF;
    backdrop-filter: blur(20rpx);
}
</style>